<template>
  <el-header>
    <div class="change_aside_width">
      <el-icon @click="changeAsideWidthHandle">
        <component :is="isAsideWidthLarge ? 'Fold' : 'Expand'"></component>
      </el-icon>
    </div>

    <div class="option">
      <el-avatar
        src="https://img2.baidu.com/it/u=2908471763,924644777&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
      ></el-avatar>
      <el-dropdown @command="dropHandle">
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="exit">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'

import useOption from '@/pinia/modules/optins'
import useUser from '@/pinia/modules/user'
import { exitLoginApi } from '@/api'

const optionStore = useOption()
const useStore = useUser()
const router = useRouter()

const isAsideWidthLarge = ref(false) // 是否为220的宽度

// 改变侧边栏宽度
const changeAsideWidthHandle = () => {
  optionStore.saveAsideWidth()
}

// 是否为220的宽度
watchEffect(() => {
  isAsideWidthLarge.value = optionStore.asideWidth === 220 ? true : false
})

// 点击
const dropHandle = (e: any) => {
  switch (e) {
    case 'exit': // 点击退出
      exitLoginApi().then(() => {
        useStore.clearUserInfo()
        router.replace('/login')
      })
      break
    default:
      break
  }
}
</script>

<style scoped lang="less">
.el-header {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bgColorBase);
  > .el-icon {
    font-size: 20px;
    color: var(--fontColorTop);
    cursor: pointer;
  }

  .option {
    padding: 5px 20px 5px 50px;
    margin-right: 40px;
    display: flex;
    align-items: center;
    border-radius: 30px;
    background-color: var(--bgColorTop);

    .el-avatar {
      cursor: pointer;
    }

    .el-dropdown {
      margin-left: 8px;
      .el-icon {
        cursor: pointer;
      }
      .el-icon:focus-visible {
        outline: none;
      }
    }
  }
}
</style>
